<template>
    <div>
    
        This is File Path Page !
    
    </div>
    
    <div>剪切板内容: {{clipboard_content}}</div>
    
    <input type="file" :onChange="onChange" id="myfile"/>

    <el-upload action=""
    :on-progress="onProgress"
      :before-upload="beforeUpload"
      :handleStart="handleStart"
      :show-file-list="false"
    >
      <el-button type="" 
       >获取文件路径</el-button>
    </el-upload>
</template>
<script setup>
// HTML 代码如下

import { ref } from "vue-demi"
import { ShowTip} from '../../utils/utils'
import { onUnmounted,onMounted } from 'vue'

let clipboard_content = ref('')
const get_path_func = function(event) {
    navigator.clipboard.readText().then((value) => {
        clipboard_content.value = value
        ShowTip.infoBox(`复制内容为：${value}`)
    })
}

function handleStart(){
    clipboard_content.value = value

}
// 上传相关事件
function onProgress(event){

    // 百分比: event.percent 78.9 // 可以全屏展示进度
    console.log('onProgress',event)
}

function beforeUpload(){
    console.log('beforeUpload')
    navigator.clipboard.readText().then((value) => {
        clipboard_content.value = value
        ShowTip.infoBox(`复制内容为：${value}`)
    })
}

onMounted(() => {
    // 启动路径获取功能
    document.addEventListener('copy', get_path_func)
}),

onUnmounted(() => {
    document.removeEventListener('copy',get_path_func)
})

</script>
<style scoped>

</style>